<template>
    <el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize"
        :close-on-click-modal="isReadOnly">
        <template #header="{ titleId, titleClass }">
            <div class="zs-drawer-header" :id="titleId" :class="titleClass">
                <i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
                <div class="zs-title zs-text-black">预测</div>
            </div>
        </template>
        <template #default>
            <el-container class="zs-drawer-container">
                <el-scrollbar class="zs-drawer-content hs-flex">
                    <!-- 必要时才定义id 请务必确保id唯一 遵从命名规范 -->
                    <div class="zs-align-center zs-space-bottom" id="project-map-add-drawer-card-01">
                        <i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
                        <div class="zs-title">预算指标</div>
                    </div>
                    <el-form :label-position="labelPosition" label-width="140px" ref="predictionFormRef"
                        :rules="predictionRules" :model="formLabelAlign">
                        <div class="zs-card zs-space-bottom" v-for="(obj, objIndex) in formLabelAlign.group"
                            :key="objIndex">
                            <el-form-item label="月份：" :prop="'group.' + objIndex + '.month'" :required="true">
                                <el-input class="zs-full-item" v-model="obj.month" placeholder=" " :disabled="true" />
                            </el-form-item>
                            <el-form-item label="销售预算：" :prop="'group.' + objIndex + '.salesBudget'" :required="true">
                                <el-input class="zs-full-item zs-input-group-md" v-model="obj.salesBudget" placeholder=" "
                                    :disabled="true">
                                    <template #append>
                                        <div>万元</div>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="销售预测：" :prop="'group.' + objIndex + '.salesPredict'"
                                :rules="predictionRules.salesPredict">
                                <el-input class="zs-full-item zs-input-group-white zs-input-group-md"
                                    v-model="obj.salesPredict" placeholder="请输入" :disabled="isReadOnly">
                                    <template #append>
                                        <div>万元</div>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </el-scrollbar>
                <hsDocWrapper :nodeList="curNodeList"></hsDocWrapper>
            </el-container>
        </template>
        <!-- 详情抽屉 footer可以不要 根据实际需求定 -->
        <template #footer>
            <div>
                <el-button class="zs-btn-md zs-btn-plain" @click="cancelClick()">取消</el-button>
                <el-button class="zs-btn-md zs-btn-primary" @click="confirmClick()">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import digitalMonthlyReportApi from '@/api/Manage/Business/digitalMonthlyReport';
import { ElMessage } from "element-plus";
import { isNumberRegex } from '@/utils/number-util'

let store = useStore()
const curDrawerSize = ref(store.state.uiDrawerSize)
const labelPosition = ref('right')
const predictionFormRef = ref();

const props = defineProps({
    isShow: { type: Boolean, default: false },
    isReadOnly: { type: Boolean, default: false },
    biProjectCode: { type: String, default: '' },
    yearmonth: { type: String, default: '' },
    preType: { type: String, default: '' },
})
const emit = defineEmits(['close'])

let formLabelAlign = ref({
    group: []
})

const checkNumber = (rule, value, callback) => {
    if (isNumberRegex(value)) {
        callback()
    } else {
        callback(new Error('请输入整数或小数'))
    }
}

let predictionRules = reactive({
    salesPredict: [
        {
            required: true, message: '请输入', trigger: 'blur'
        },
        {
            validator: checkNumber, trigger: 'blur'
        }
    ]
})

const isShowDrawer = ref(props.isShow)
// 关闭drawer
const handleClose = (done) => {
    emit('close', { isShow: false })
    predictionFormRef.value.resetFields()
    done()
}
function cancelClick() {
    isShowDrawer.value = false
    emit('close', { isShow: false })
}

// 获取详情
const getDetail = () => {
    digitalMonthlyReportApi.predictShowDataApi({ projectCode: props.biProjectCode, dataTime: props.yearmonth, preType: props.preType }).then((res) => {
        if (res.data.code == 200) {
            formLabelAlign.value.group = res.data.data
        }
    })
}

const confirmClick = () => {
    let formList = [predictionFormRef]
    let resultArr = [];
    let validate = (form) => {
        let result = new Promise((resolve, reject) => {
            form.value.validate(valid => {
                if (valid) {
                    resolve()
                } else {
                    reject()
                }
            })
        })
        resultArr.push(result)
    }
    formList.forEach(item => {
        validate(item)
    })
    Promise.all(resultArr).then(() => {
        saveRule()
    })
}

const saveRule = () => {
    digitalMonthlyReportApi.submitPredictShowDataApi({ projectCode: props.biProjectCode, dataTime: props.yearmonth, preType: props.preType, dataList: formLabelAlign.value.group }).then((res) => {
        if (res.data.code == 200) {
            ElMessage({
                message: '同步成功',
                type: 'success',
            })
            cancelClick()
        }
    })
}

const curNodeList = ref([
    { name: '预算指标', id: 'db-DigitalMonthlyReport-drawer-card-01' },
])

getDetail()

</script>

<style scoped lang="scss"></style>
